<template>
	<view class="box" :style="{ background: backColor, 'border-top': isTBorder ? borderStyle : '', height: bHeight + 'px' }">
		<view class="item-box" :style="{ height: bHeight + 'px' }" v-for="(item, index) in tabList" :key="index" @click="changeTab(index, item)">
			<image v-bind:src="checkedAct == index ? item.checkedImg : item.img" mode=""></image>
			<text :style="{ color: checkedAct == index ? aColor : dColor, 'font-size': fontSize, 'font-weight': isBold ? 'bold' : '' }">{{ item.title }}</text>
			<view class="dot-box" v-if="item.isDot">
				<text
					class="dot-text"
					:style="{ color: dotFontColor }"
					:class="[dotType == 'success' ? 'success' : dotType == 'primary' ? 'primary' : dotType == 'warning' ? 'warning' : dotType == 'error' ? 'error' : '']"
				>
					{{ item.val }}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
var list = [
	{
		img: require('./img/1.png'),
		checkedImg: require('./img/5.png'),
		title: '首页'
	},
	{
		img: require('./img/2.png'),
		checkedImg: require('./img/6.png'),
		title: '分类'
	},
	{
		img: require('./img/3.png'),
		checkedImg: require('./img/7.png'),
		// isDot: true,
		// val: 10,
		title: '购物车'
	},
	{
		img: require('./img/4.png'),
		checkedImg: require('./img/8.png'),
		title: '我的'
	}
];
export default {
	data() {
		return {
			checkedAct: 0
		};
	},
	props: {
		// 盒子高度
		bHeight: {
			type: Number,
			default() {
				return 50;
			}
		},
		// 数据列表
		tabList: {
			type: Array,
			default() {
				return list;
			}
		},
		// 未选中颜色
		dColor: {
			type: String,
			default() {
				return '#515151';
			}
		},
		// 选择颜色
		aColor: {
			type: String,
			default() {
				return '#6CD5F6';
			}
		},
		// 背景色
		backColor: {
			type: String,
			default() {
				return '#FFFFFF';
			}
		},
		//是否显示border
		isTBorder: {
			type: Boolean,
			default() {
				return false;
			}
		},
		// 横线样式
		borderStyle: {
			type: String,
			default() {
				return '1rpx solid #515151';
			}
		},
		// 文字大小
		fontSize: {
			type: String,
			default() {
				return '24rpx';
			}
		},
		// 文字是否加粗
		isBold: {
			type: Boolean,
			default() {
				return false;
			}
		},
		//dot类型
		dotType: {
			type: String,
			default() {
				return 'default';
			}
		},
		//dot文字颜色
		dotFontColor: {
			type: String,
			default() {
				return '#515151';
			}
		}
	},
	methods: {
		changeTab(index, item) {
			if(index == this.checkedAct){
				return
			}
			this.checkedAct = index;
			this.$emit('changeTab', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.success {
	background-color: $uni-color-success !important;
}
.primary {
	background-color: $uni-color-primary !important;
}
.warning {
	background-color: $uni-color-warning !important;
}
.error {
	background-color: $uni-color-error !important;
}
.box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.item-box {
		position: relative;
		flex: 1;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			width: 48rpx;
			height: 48rpx;
		}
		text {
			font-size: 24rpx;
		}
		.dot-box {
			position: absolute;
			top: -6rpx;
			left: 60%;
			.dot-text {
				height: 16px;
				padding: 0 5px;
				line-height: 16px;
				font-size: 24rpx;
				border-radius: 15px;
				background-color: #f8f8f8;
				display: flex;
				color: #ffffff;
				justify-content: center;
				-webkit-box-pack: center;
			}
		}
	}
}
</style>
